<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Tables - Azzara Bootstrap 4 Admin Dashboard</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>ProjectList-ProjectManagment</title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <link rel="icon" th:href="@{/assets/img/icon.ico}" type="image/x-icon"/>
    <div th:replace="commom/bar :: commom_css"></div>
</head>
<body>
<div class="wrapper">
    <!--
            Tip 1: You can change the background color of the main header using: data-background-color="blue | purple | light-blue | green | orange | red"
    -->
    <div class="main-header" data-background-color="purple">
        <!-- Logo Header -->
        <div class="logo-header">

            <a href="../index.html" class="logo">
                <img src="../../assets/img/logoazzara.svg" alt="navbar brand" class="navbar-brand">
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="fa fa-bars"></i>
					</span>
            </button>
            <button class="topbar-toggler more"><i class="fa fa-ellipsis-v"></i></button>
            <div class="navbar-minimize">
                <button class="btn btn-minimize btn-rounded">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        <!-- End Logo Header -->

        <!-- Navbar Header -->
        <div th:replace="commom/bar :: topbar"></div>
        <!-- End Navbar -->
    </div>

    <!-- Sidebar -->
    <div th:replace="commom/bar :: sidebar"></div>
    <!-- End Sidebar -->

    <div class="main-panel">
        <div class="content">
            <div class="page-inner">
                <div class="page-header">
                    <h4 class="page-title">DataTables.Net</h4>
                    <ul class="breadcrumbs">
                        <li class="nav-home">
                            <a href="#">
                                <i class="flaticon-home"></i>
                            </a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">Tables</a>
                        </li>
                        <li class="separator">
                            <i class="flaticon-right-arrow"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">Datatables</a>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <h4 class="card-title">项目信息</h4>
                                    <button class="btn btn-primary btn-round ml-auto" data-toggle="modal" data-target="#addRowModal">
                                        <i class="fa fa-plus"></i>
                                        Add Project
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- 添加弹窗Modal -->
                                <div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header no-bd">
                                                <h5 class="modal-title">
														<span class="fw-mediumbold">
														New</span>
                                                    <span class="fw-light">
															Project
														</span>
                                                </h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                                <div class="modal-body">
                                                    <p class="small">Create a new Project using this form, make sure you fill them all</p>
                                                    <div class="row">
                                                        <div class="col-md-6 pr-0">
                                                            <div class="form-group form-group-default">
                                                                <label>项目名</label>
                                                                <input id="addName" name="name" type="text" class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group form-group-default">
                                                                <label>项目管理员</label>
                                                                <input id="addChargeUserId" name="chargeUserId" type="number" class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group form-group-default">
                                                                <label>项目类型</label>
                                                                <select name="type" id="addType">
                                                                    <option value=null th:selected="selected">请选择</option>
                                                                    <option value="Web应用开发">Web应用开发</option>
                                                                    <option value="大数据">大数据</option>
                                                                    <option value="物联网">物联网</option>
                                                                    <option value="人工智能">人工智能</option>
                                                                    <option value="微信小程序">微信小程序</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group form-group-default">
                                                                <label>项目描述</label>
                                                                <input id="addDesciption" name="characterization" type="text" class="form-control" >
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer no-bd">
                                                    <button type="button" class="btn btn-primary" onclick="addProject()">Add</button>
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 修改弹窗Modal -->
                                <div class="modal fade" id="editRowModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header no-bd">
                                                <h5 class="modal-title">
														<span class="fw-mediumbold">
														Edit</span>
                                                    <span class="fw-light">
															Project
														</span>
                                                </h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-6 pr-0">
                                                            <div class="form-group form-group-default">
                                                                <label>ID</label>
                                                                <input id="editId" name="id" type="text" readonly="ture" class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 pr-0">
                                                            <div class="form-group form-group-default">
                                                                <label>项目名</label>
                                                                <input id="editName" name="name"type="text" class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group form-group-default">
                                                                <label>项目管理员</label>
                                                                <input id="editChargeUserId" name="chargeUserId" type="number" class="form-control" required>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group form-group-default">
                                                                <label>类型</label>
                                                                <select name="type" id="editType">
                                                                    <option value="Web应用开发">Web应用开发</option>
                                                                    <option value="大数据">大数据</option>
                                                                    <option value="物联网">物联网</option>
                                                                    <option value="人工智能">人工智能</option>
                                                                    <option value="微信小程序">微信小程序</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group form-group-default">
                                                                <label>项目描述</label>
                                                                <input id="editCharacterization" name="characterization" type="text" class="form-control" >
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer no-bd">
                                                    <button type="button" class="btn btn-primary" onclick="updateProject()">Update</button>
                                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- 项目信息表单 -->
                                <div class="table-responsive">
                                    <table id="add-row" class="display table table-striped table-hover" >
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>项目名</th>
                                            <th>项目管理员</th>
                                            <th>代码行</th>
                                            <th>进度</th>
                                            <th>功能点</th>
                                            <th>已完成功能点</th>
                                            <th>提交次数</th>
                                            <th>项目类型</th>
                                            <th>项目描述</th>
                                            <th>创建时间</th>
                                            <th>收藏次数</th>
                                            <th>点赞次数</th>
                                            <th style="width: 10%">Action</th>
                                        </tr>
                                        </thead>
                                        <tfoot>
                                        <tr>
                                            <th>ID</th>
                                            <th>项目名</th>
                                            <th>项目管理员</th>
                                            <th>代码行</th>
                                            <th>进度</th>
                                            <th>功能点</th>
                                            <th>已完成功能点</th>
                                            <th>提交次数</th>
                                            <th>项目类型</th>
                                            <th>项目描述</th>
                                            <th>创建时间</th>
                                            <th>收藏次数</th>
                                            <th>点赞次数</th>
                                            <th>Action</th>
                                        </tr>
                                        </tfoot>
                                        <tbody>
                                        <tr th:each="project:${projectlist}">
                                            <td th:text="${project.id}"></td>
                                            <td th:text="${project.name}"></td>
                                            <td th:text="${project.chargeUserId}"></td>
                                            <td th:text="${project.codeLineNumber}"></td>
                                            <td th:text="${project.schedule}"></td>
                                            <td th:text="${project.functionPoints}"></td>
                                            <td th:text="${project.completedFunctionPoints}"></td>
                                            <td th:text="${project.codeUpdateCount}"></td>
                                            <td th:text="${project.type}"></td>
                                            <td th:text="${project.characterization}"></td>
                                            <td th:text="${#dates.format(project.createTime,'yyyy-MM-dd')}"></td>
                                            <td th:text="${project.storeCount}"></td>
                                            <td th:text="${project.likeCount}"></td>
                                            <td>
                                                <div class="form-button-action">
                                                    <button class="btn btn-primary btn-link ml-auto" data-toggle="modal" data-target="#editRowModal" onclick="editProject(this)">
                                                        <i class="fa fa-edit"></i>
                                                    </button>
                                                    <button type="button"  data-toggle="tooltip" title="" class="btn btn-link btn-danger" th:onclick="deleteProject([[${project.id}]])" >
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<!--公共JS-->
<th:block th:replace="commom/bar :: commom_js" />
<!--公共JS-->
<th:block th:replace="commom/bar :: nav_js" />
<script >
    $(document).ready(function() {
        $('#basic-datatables').DataTable({
        });

        $('#multi-filter-select').DataTable( {
            "pageLength": 5,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select class="form-control"><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        });
        // Add Row
        $('#add-row').DataTable({
            "pageLength": 5,
        });

        var action = '<td> <div class="form-button-action"> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

        $('#addRowButton').click(function() {
            $('#add-row').dataTable().fnAddData([
                $("#addName").val(),
                $("#addPosition").val(),
                $("#addOffice").val(),
                action
            ]);
            $('#addRowModal').modal('hide');

        });
    });

    function editProject(obj){
        var $td= $(obj).parents('tr').children('td');
        var td_id = $td.eq(0).text();
        var td_name = $td.eq(1).text();
        var td_chargeUserId = $td.eq(2).text();
        var td_schedule = $td.eq(4).text();
        var td_functionPoints = $td.eq(5).text();
        var td_completedFunctionPoints = $td.eq(6).text();
        var td_type = $td.eq(8).text();
        var td_characterization = $td.eq(9).text();

        $("#editId").val(td_id);
        $("#editName").val(td_name);
        $("#editChargeUserId").val(td_chargeUserId);
        $("#editSchedule").val(td_schedule);
        $("#editFunctionPoints").val(td_functionPoints);
        $("#editCompletedFunctionPoints").val(td_completedFunctionPoints);
        $("#editType").val(td_type);
        $("#editCharacterization").val(td_characterization);
    }

    //删除项目
    function deleteProject(projectId){
        swal({
            icon : "warning",
            title: "您确定要删除该项目吗?",
            text: "请谨慎操作！",
            type: "warning",
            buttons:{
                cancel: {
                    visible: true,
                    text : '取消',
                    className: 'btn btn-danger'
                },
                confirm: {
                    text : '确定删除',
                    className : 'btn btn-success'
                }
            },
            closeOnConfirm: false,
        }).then(
            function (isConfirm) {
                if (!isConfirm) return;
                $.ajax(
                    {
                        type: "POST",
                        url: "/del_project",
                        data: {"id": projectId},
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                swal("删除成功！", {
                                    icon : "success",
                                    buttons: false,
                                    timer: 1500,
                                });
                                setTimeout(function(){
                                    location.href = "/projects_list";
                                },1500);
                            }
                            else {
                                swal("删除失败！",{
                                    icon: "error",
                                    buttons: {
                                        confirm: {
                                            className: 'btn btn-danger'
                                        }
                                    }
                                })
                            }
                        }
                    }
                );
            }
        );
    }

    //添加项目
    function addProject() {
        var name = $("#addName").val();
        var chargeUserId = $("#addChargeUserId").val();
        var type = $("#addType").val();
        var characterization = $("#addDesciption").val();
            $.ajax(
                {
                    type: "POST",
                    url: "/add_project",
                    data: {
                        "name": name,
                        "chargeUserId": chargeUserId,
                        "type": type,
                        "characterization": characterization
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data == 2) {
                            swal("添加成功！",{
                                icon : "success",
                                buttons: false,
                                timer: 1500,
                            });
                            setTimeout(function(){
                                location.href = "/projects_list";
                            },1500);
                        }
                        else if(data == 1){
                            swal("添加失败！","该项目负责人不存在!",{
                                icon: "error",
                                buttons: {
                                    confirm: {
                                        className: 'btn btn-danger'
                                    }
                                }
                            })
                        }
                        else {
                            swal("添加失败！",{
                                icon: "error",
                                buttons: {
                                    confirm: {
                                        className: 'btn btn-danger'
                                    }
                                }
                            })
                        }
                    }
                }
            );
    }

    //修改用户
    function updateProject() {
        var id = $("#editId").val();
        var name = $("#editName").val();
        var chargeUserId = $("#editChargeUserId").val();
        var type = $("#editType").val();
        var characterization = $("#editCharacterization").val();
            $.ajax(
                {
                    type: "POST",
                    url: "/edit_project",
                    data: {
                        "id": id,
                        "name": name,
                        "chargeUserId": chargeUserId,
                        "type": type,
                        "characterization": characterization
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data == 2) {
                            swal("修改成功！", {
                                icon : "success",
                                buttons: false,
                                timer: 1500,
                            });
                            setTimeout(function(){
                                location.href = "/projects_list";
                            },1500);
                        }
                        else if (data == 1){
                            swal("修改失败！","该项目负责人不存在!",{
                                icon: "error",
                                buttons: {
                                    confirm: {
                                        className: 'btn btn-danger'
                                    }
                                }
                            })
                        }
                        else {
                            swal("修改失败！",{
                                icon: "error",
                                buttons: {
                                    confirm: {
                                        className: 'btn btn-danger'
                                    }
                                }
                            })
                        }
                    }
                }
            );
    }
</script>


</body>
</html>